<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录</title>
    #include("/template/common/include/_css.html")
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        .wrap{
            width: 100%;
            height: 100%;
            background: url('#(ctxPath)/static/img/bg1.png') center no-repeat;
            background-size:cover;
            display: flex;
            align-items: center;
            flex-direction:row;
            justify-content: center;
        }
        .container{
            display: flex;
            flex-direction:row;
            margin-bottom: 10px;
        }
        .container .title{
            display: flex;
            align-items: center;
            font-size: 20px;
            margin-left: 25px;
            color: #888;
        }
        .layui-form{
            background-color: #1c5a86;
            padding: 25px 50px;
        }
        .layui-input-block{
            margin-left: 0;
        }
        .layui-input, .layui-select, .layui-textarea{
            background-color: #0b335f;
            border-color: #1c5a86;
            padding-left: 30px;
            color: #888;
        }
        .form-title{
            text-align: center;
            color: #888;
            font-size: 20px;
        }
        .layui-btn{
            width: 100%;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="layui-col-md3 layui-col-md-offset6">
        <div class="container">
            <div class="logo">
                <img src="" height="50px" alt="">
            </div>
            <div class="title">
                <p></p>
            </div>
        </div>
        <form class="layui-form" action="">
            <div class="layui-form-item form-title">
                <p>Intelligence GC 1.0</p>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="text" name="loginName" required  lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input">
                    <i class="layui-icon layui-icon-username" style="position: absolute;top:9px;left: 8px;color:#888"></i>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="password" id="password" name="password" required  lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                    <i class="layui-icon layui-icon-password" style="position: absolute;top:9px;left: 8px;color:#888"></i>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="sub" type="button" class="layui-btn btn-submit" lay-submit lay-filter="sub">立即登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
#include("/template/common/include/_js.html")
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        // 操作对象
        var form = layui.form
            , layer = layui.layer
            , $ = layui.jquery;

        $("#password").keydown(function(e) {
            if (e.keyCode == 13) {
                $("#sub").click();
            }
        });
        // 提交监听
        form.on('submit(sub)', function (data) {
            util.sendAjax ({
                type: 'POST',
                url: '#(ctxPath)/postLogin',
                data: $.param(data.field),
                loadFlag: true,
                success : function(data) {
                    window.location.href = "/";
                },
                complete : function() {
                    // 刷新验证码
                    $("#captchaImg").attr('src', '#(ctxPath)/captcha?'+Math.random());
                }
            });

            return false;
        });
    })

</script>
</body>
</html>